﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">您正在做的业务是:人力资源--客户化设置--人力资源档案管理设置--III级机构设置</p>
			</td>
		</tr>
	</table>
	<el-button plain v-on:click="Select()">查询</el-button>
	<table width="100%" border="1" cellpadding=0 cellspacing=1
		   bordercolorlight=#848284 bordercolordark=#eeeeee
		   class="TABLE_STYLE1">
		<tr>
			<td width="10%" class="TD_STYLE1">
				请选择要导出的表格
			</td>
			<td width="10%" class="TD_STYLE2">
				<el-select v-model="first"
						   placeholder="请选择"
						   size="large"
						   style="width: 245px">
					<el-option v-for="item in options"
							   :key="item.ffkId"
							   :label="item.label"
							   :value="item.value"/>
				</el-select>
			</td>
			<td width="10%" class="TD_STYLE1">
				请选择要导出的字段
			</td>
			<td width="10%" class="TD_STYLE1">
				<el-button plain v-on:click="qx()">全选</el-button>
			</td>
			<td width="50%" class="TD_STYLE1">
			</td>
		</tr>
	</table>
	<el-checkbox v-model="x.checked1" size="large">编号</el-checkbox>
	<el-checkbox v-model="x.checked2" size="large">试卷编号</el-checkbox>
	<el-checkbox v-model="x.checked3" size="large">职位分类编号</el-checkbox>
	<el-checkbox v-model="x.checked4" size="large">职位分类名称</el-checkbox>
	<el-checkbox v-model="x.checked5" size="large">职位编号</el-checkbox>
	<el-checkbox v-model="x.checked6" size="large">职位名称</el-checkbox>
	<el-checkbox v-model="x.checked7" size="large">登记人</el-checkbox>
	<el-checkbox v-model="x.checked8" size="large">登记时间</el-checkbox>
	<el-checkbox v-model="x.checked9" size="large">答题限时</el-checkbox>
</div>
<script>
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			const x=reactive({
			 checked1:false,
			 checked2 : false,
			 checked3 : false,
			 checked4 : false,
			 checked5 : false,
			 checked6 : false,
			 checked7 : false,
			 checked8 : false,
			 checked9 : false,
			})
			const options = [
				{
					value: 'Option1',
					label: 'Option1',
				},
				{
					value: 'Option2',
					label: 'Option2',
				},
				{
					value: 'Option3',
					label: 'Option3',
				},
				{
					value: 'Option4',
					label: 'Option4',
				},
				{
					value: 'Option5',
					label: 'Option5',
				},
			]
			function qx() {
				x.checked1 = true;
				x.checked2 = true;
				x.checked3 = true;
				x.checked4 = true;
				x.checked5 = true;
				x.checked6 = true;
				x.checked7 = true;
				x.checked8 = true;
				x.checked9 = true;
				x.checked1 = true;
			}
			function Select(){


			}
			return {
				x,
				Select,
				qx,
				options

				
			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #FFDB6F;
		border-collapse: collapse;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	BODY {
		background-color: #FFFFCC;
		FONT-SIZE: 10pt;
		SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
		SCROLLBAR-SHADOW-COLOR: buttonface;
		SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
		SCROLLBAR-TRACK-COLOR: #eeeeee;
		SCROLLBAR-DARKSHADOW-COLOR: buttonshadow;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}

	#tt {
		margin-top: 5%;
	}

</style>
